<template>
  <el-dialog
    v-model="dialogFormVisible"
    :close-on-click-modal="false"
    :title="title"
    width="460px"
    @close="close"
  >
    <el-form ref="formRef" label-width="110px" :model="form" :rules="rules">
      <div v-if="title == '添加'">
        <el-form-item label="管理员名称：" prop="name">
          <el-input v-model.trim="form.name" placeholder="请输入管理员名称" />
        </el-form-item>
        <el-form-item label="管理员账号：" prop="account">
          <el-input
            v-model.trim="form.account"
            placeholder="请输入管理员账号"
          />
        </el-form-item>
        <el-form-item label="管理员密码：" prop="password">
          <el-input
            v-model.trim="form.password"
            placeholder="请输入管理员密码"
          />
        </el-form-item>
      </div>
      <el-form-item v-else label="绑定角色：" prop="role_id">
        <el-select
          v-model="form.role_id"
          placeholder="请选择"
          style="width: 260px"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { userCreate, getRoleAll, bindRole } from '@/api/table'
  import { isPassword, isAccount } from '@/utils/validate'
  export default defineComponent({
    name: 'TableEdit',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')
      const validatePassword = (rule, value, callback) => {
        if (!isPassword(value)) callback(new Error('密码不能少于6位'))
        else callback()
      }
      const validateAccount = (rule, value, callback) => {
        if (!isAccount(value)) callback(new Error('账号为6 - 16位英文或数字'))
        else callback()
      }
      const state = reactive({
        formRef: null,
        form: {
          name: '',
          account: '',
          password: '',
          role_id: '',
          manage_id: '',
        },
        rules: {
          name: [{ required: true, trigger: 'blur', message: '请输入名称' }],
          account: [
            { required: true, trigger: 'blur', validator: validateAccount },
          ],
          password: [
            {
              required: true,
              trigger: 'blur',
              validator: validatePassword,
            },
          ],
        },
        title: '',
        options: [],
        dialogFormVisible: false,
      })
      const showEdit = (row) => {
        if (!row) {
          state.title = '添加'
        } else {
          state.title = '授权'
          state.form.manage_id = row.id
          state.form.role_id = row.role.id
        }

        state.dialogFormVisible = true
      }
      const roleDate = async () => {
        const { data } = await getRoleAll()
        state.options = data
      }
      const close = () => {
        state.form = {}
        if (state.title == '添加') {
          state['formRef'].resetFields()
        }
        state.dialogFormVisible = false
      }
      const save = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            if (state.title == '添加') {
              const { message } = await userCreate(state.form)
              $baseMessage(message, 'success', 'vab-hey-message-success')
            } else {
              console.log(state.form)
              const { message } = await bindRole(state.form)
              $baseMessage(message, 'success', 'vab-hey-message-success')
            }
            emit('fetch-data')
            close()
          }
        })
      }
      onMounted(() => {
        // roleDate()
      })
      return {
        ...toRefs(state),
        showEdit,
        close,
        save,
      }
    },
  })
</script>
